<template>
  <transition name="slide">
      <musiclist :songList="musicdatalist" :image="singer.img" :name="singer.name"></musiclist>
  </transition>
</template>

<script>
import {creatSong} from '../../common/js/song'
import {mapGetters} from 'vuex'
import musiclist from '../base/musiclist'
export default {
  data() {
    return {
      // 默认请求头数据
      params: {
        g_tk: 5381,
        loginUin: 0,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: '0',
        platform: 'yqq.json',
        needNewCode: 0,
        ct: 24,
        order: 'listen',
        begin: 0,
        num: 100,
        songstatus: 1
      },
      musicdatalist: []
    }
  },
  computed: {
    ...mapGetters([
      'singer'
    ])
  },
  created() {
    this.getSingerSongList(this.singer.mid)
  },
  methods: {
    // 根据歌手mid获取歌单数据
    getSingerSongList(singer) {
      if (!this.singer.id) {
        this.$router.push({
          path: '/singer'
        })
        return
      }
      var mid = {singermid: singer}
      this.params = Object.assign(this.params, mid)
      this.axios.get('/api/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?', {params: this.params})
        .then((res) => {
          if (res.data.code == 0) {
            this.musicdatalist = this._noramSongList(res.data.data.list)
          }
        })
    },
    _noramSongList(list) {
      let arr = []
      list.forEach(element => {
        arr.push(creatSong(element.musicData))
      })
      return arr
    }
  },
  components: {
    musiclist
  }
}
</script>

<style lang="scss">
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
</style>
